<template>
	<div class="wrap">
		<!--<div class="data">
			<div class="left" style="width: 204px;margin-right: 100px;">
				<div class="headline">
					<span class="title">用户数量</span>
				</div>
				<div class="numberWrap">
					<span v-for="item in userNum" class="type2 type">{{item}}</span>
				</div>
			</div>
			<div class="right" style="width: 340px;">
				<div class="headline">
					<span class="title">数据总量</span>
				</div>
				<div class="numberWrap">
					<span v-for="item in totalNum" class="type1 type">{{item}}</span>
				</div>
			</div>
		</div>-->
		<e-chart :options="option" style="height:100%" @click="handelClick"></e-chart>
		<div class="mapChoose">
			<span v-for="(item,index) in parentInfo" :key="item.code">
	        <span class="title" @click="chooseArea(item,index)">{{item.cityName=='全国'?'中国':item.cityName}}</span>
			<span class="icon" v-show="index+1!=parentInfo.length">></span>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				totalNum: [3, 2, 5, 6, 9, 8, 7, 5, 0, 1],
				userNum: [0, 2, 5, 6, 8],
				option: null,
				zoom:1.1,
				geoJson: null,
				parentInfo: [{
					cityName: '全国',
					code: 100000
				}],
				currentIndex: 0,
				timeTitle: ['2015', '2016', '2017', '2018', '2019'],
				smap: null
			}
		},
		mounted() {
			this.init(100000)
		},
		methods: {
			//选择切换市县
			chooseArea(val, index) {
				if(this.parentInfo.length === index + 1) {
					return
				}
				this.parentInfo.splice(index + 1)
				this.init(this.parentInfo[this.parentInfo.length - 1].code);
			},
			// 传递点击事件
			handelClick(params) {
				this.echartsMapClick(params)
			},
			// echarts点击事件
			echartsMapClick(params) {
				if(!params.data) {
					return
				} else {
					//如果当前是最后一级，那就直接return
					if(this.parentInfo[this.parentInfo.length - 1].code == params.data.cityCode) {
						return
					}
					let data = params.data
					this.parentInfo.push({
						cityName: data.name,
						code: data.cityCode
					})
					this.init(data.cityCode)
				}
			},
			// 高德地图开放接口技术获取 echarts 行政区域地图数据
			getGeoJson(adcode, childAdcode = '') {
				return new Promise((resolve, reject) => {
					function insideFun(adcode, childAdcode) {
						AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
							var districtExplorer = new DistrictExplorer();
							districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
								if(error) {
									console.error(error);
									reject(error);
									return;
								}
								let Json = areaNode.getSubFeatures();
								if(Json.length === 0) {
									let parent = areaNode._data.geoData.parent.properties.acroutes;
									insideFun(parent[parent.length - 1], adcode);
									return;
								}

								if(childAdcode) {
									Json = Json.filter(item => {
										return item.properties.adcode == childAdcode;
									});
								}
								let mapJson = {
									features: Json
								};
								resolve(mapJson);
							});
						});
					}
					insideFun(adcode, childAdcode);
				});
			},
			init(adcode) {
				this.getGeoJson(adcode).then(data => {
					this.geoJson = data
					this.getMapData()
				})
			},
			getMapData() {
				let mapData = [],
					pointData = [],
					sum = 0
				this.geoJson.features.forEach(item => {
					// 赋值 数据对接后需要匹配
					let value = parseInt(Math.random() * 3000)
					mapData.push({
						name: item.properties.name,
						value: value,
						cityCode: item.properties.adcode
					})
					pointData.push({
						name: item.properties.name,
						value: [item.properties.center[0], item.properties.center[1], value],
						cityCode: item.properties.adcode
					})
					sum += value
				})
				mapData = mapData.sort(function(a, b) {
					return b.value - a.value
				});
				this.initEchartMap(mapData, sum, pointData)
			},
			//渲染echarts
			initEchartMap(mapData, sum, pointData) {
				var xData = [],
					yData = []
				var min = mapData[mapData.length - 1].value
				var max = mapData[0].value
				if(mapData.length === 1) {
					min = 0
				}
				mapData.forEach(c => {
					xData.unshift(c.name)
					yData.unshift(c.value)
				})
				this.zoom=this.parentInfo.length === 1 ?1.1:0.8
				//这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
				this.$echarts.registerMap(this.parentInfo.length === 1 ? 'china' : 'map', this.geoJson);
				var option = {
					baseOption: {
						// 设置标题
						title: [
							{
								text: "销售总额：" + sum.toFixed(2) + '万',
								left: 'center',
								top: '1.5%',
								textStyle: {
									color: '#FFAC50',
									fontSize: 26
								}
							}
						],
						// 划入地图配置
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
						},
						// 设置右边统计图位置 宽度
						grid: {
							right: '1%',
							top: '10%',
							bottom: '5%',
							width: '20%'
						},
						// 中间地图设置
						geo: {
							map: this.parentInfo.length === 1 ? 'china' : 'map',
							zoom: this.zoom,
							roam: true,
							left: '10%',
							top: '20%',
							tooltip: {
								trigger: 'item',
								formatter: (p) => {
									let val = p.value[2];
									if(window.isNaN(val)) {
										val = 0;
									}
									let txtCon =
										"<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(2) + '万</div>';
									return txtCon;
								}
							},
							label: {
								normal: {
									show: true,
									color: "rgb(249, 249, 249)", //省份标签字体颜色
									formatter: p => {
										switch(p.name) {
											case '内蒙古自治区':
												p.name = "内蒙古"
												break;
											case '西藏自治区':
												p.name = "西藏"
												break;
											case '新疆维吾尔自治区':
												p.name = "新疆"
												break;
											case '宁夏回族自治区':
												p.name = "宁夏"
												break;
											case '广西壮族自治区':
												p.name = "广西"
												break;
											case '香港特别行政区':
												p.name = "香港"
												break;
											case '澳门特别行政区':
												p.name = "澳门"
												break;

										}
										return p.name;
									}
								},
								emphasis: {
									show: true,
									color: '#f75a00',
								}
							},
							itemStyle: {
								normal: {
									areaColor: '#24CFF4',
									borderColor: '#53D9FF',
									borderWidth: 1.3,
									shadowBlur: 15,
									shadowColor: 'rgb(58,115,192)',
									shadowOffsetX: 7,
									shadowOffsetY: 6,
								},
								emphasis: {
									areaColor: '#8dd7fc',
									borderWidth: 1.6,
									shadowBlur: 25,
								}

							},
						},
						visualMap: {
							min: min,
							max: max,
							left: '3%',
							bottom: '5%',
							calculable: true,
							seriesIndex: [0],
							inRange: {
								color: ['#24CFF4', '#2E98CA', '#1E62AC']
							},
							textStyle: {
								color: '#24CFF4'
							}
						},
						xAxis: {
							type: 'value',
							scale: true,
							position: 'top',
							boundaryGap: false,
							splitLine: {
								show: false
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#455B77'
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show:false,
								margin: 2,
								textStyle: {
									color: '#c0e6f9'
								}
							},
						},
						yAxis: {
							type: 'category',
							nameGap: 16,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#455B77'
								}
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								interval: 0,
								textStyle: {
									color: '#c0e6f9'
								}
							},
							data: xData
						},
						series: [
							// 地图上的数据设置
							{
								type: 'map',
								geoIndex: 0,
								map: this.parentInfo.length === 1 ? 'china' : 'map',
								roam: true,
								zoom: 1.1,
								// 
								tooltip: {
									trigger: "item",
									formatter: p => {
										let val = p.value;
										if(p.name == '南海诸岛') return
										if(window.isNaN(val)) {
											val = 0;
										}
										let txtCon =
											"<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(2) + '万</div>';
										return txtCon;
									}
								},
								label: {
									normal: {
										show: false,
									},
									emphasis: {
										show: false,
									}
								},
								data: mapData,
							},
							// 地图上的黄点设置
							{
								name: '散点',
								type: 'effectScatter',
								coordinateSystem: 'geo',
								rippleEffect: {
									brushType: 'fill'
								},
								itemStyle: {
									normal: {
										color: '#F4E925',
										shadowBlur: 10,
										shadowColor: '#333'
									}
								},
								// 所有点数据
								data: pointData,
								// 设置点的大小
								symbolSize: function(val) {
									let value = val[2]
									if(value == max) {
										return 27
									}
									return 10
								},
								showEffectOn: 'render', //加载完毕显示特效
							},
							// 右侧柱状图设置
							{
								type: 'bar',
								barGap: '-100%',
								barCategoryGap: '60%',
								itemStyle: {
									normal: {
										color: '#11AAFE'
									},
									emphasis: {
										show: false
									}
								},
								data: yData
							}

						]

					},
				}
				this.option = option
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.data {
		position: absolute;
		height: 100px;
		width: 100%;
		z-index: 1;
		display: flex;
		top: 10px;
		left: 10px;
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 12px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
	
	.numberWrap {
		height: 50px;
		display: flex;
		justify-content: space-around;
		.type {
			display: flex;
			height: 100%;
			background: url(/img/bigScreen/15.png);
			font-size: 32px;
			align-items: center;
			background-size: 100% 100%;
			justify-content: center;
			border-radius: 4px;
			color: #39CED8;
			text-shadow: 0 0 25px #39CED8;
			text-align: center;
			font-family: yjsz
		}
		.type1 {
			width: 9%;
		}
		.type2 {
			width: 15%;
		}
	}
	
	.mapChoose {
		position: absolute;
		left: 20px;
		top: 55px;
		color: #eee;
		.title {
			padding: 5px;
			border-top: 1px solid rgba(147, 235, 248, .8);
			border-bottom: 1px solid rgba(147, 235, 248, .8);
			cursor: pointer;
		}
		.icon {
			font-family: "simsun";
			font-size: 25px;
			margin: 0 11px;
		}
	}
</style>